<template>
  <view>
    <view class="drawer-button" @click="toggleDrawer">
		<view class="drawer-header">
			<text>基本信息</text>
			<icon v-if="showRightArrow" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
		</view>
    </view>
    <view class="drawer-content" :class="{ 'show': showDrawer }">
		<view>
			<text>任务编码：{{pojo.id}}</text>
		</view>
		<view>
			<icon class="iconfont icon-dingwei" style="font-size:24px;"></icon>
			起：{{pojo.startAddress}}
		</view>
		<view>
			<icon class="iconfont icon-zhunxing" style="font-size:24px;"></icon>
			止：{{pojo.endAddress}}
		</view>
		<view>
			联系人：{{pojo.lxr}}
		</view>
		<view>
			联系电话：{{pojo.phone}}<icon class="iconfont icon-dianhua" style="font-size:24px;"></icon>
		</view>
		<view>
			提货时间：{{pojo.thsj}}
		</view>
		<view>
			预达时间：{{pojo.sdsj}}
		</view>
    </view>
	<view class="drawer-button" @click="toggleDrawera">
		<view class="drawer-header">
			<text>车辆司机信息</text>
			<icon v-if="showRightArrowa" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
		</view>
    </view>
    <view class="drawer-content" :class="{ 'show': showDrawera }">
		<view><text class="label">车牌号:</text><text class="value">{{ pojo.cph }}</text></view>
		<view><text class="label">司机姓名:</text><text class="value">{{ pojo.lxr }}</text></view>
    </view>
	<view class="drawer-button" @click="toggleDrawerb">
		<view class="drawer-header">
			<text>运输路线</text>
			<icon v-if="showRightArrowb" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
		</view>
    </view>
    <view class="drawer-content" :class="{ 'show': showDrawerb }">
		<view style="text-align: center;font-size: 10px;"><text>计划{{pojo.sdsj}}送达</text></view>
		<view class="container"><text class="labela">机构A</text><icon class="iconfont icon-changjiantou"></icon><text class="valuea" >机构B</text></view>
    </view>
	<view class="drawer-button" @click="toggleDrawerc">
		<view class="drawer-header">
			<text>货物信息</text>
			<icon v-if="showRightArrowc" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
		</view>
    </view>
    <view class="drawer-content" :class="{ 'show': showDrawerc }">
		<view>共计：{{pojo.ds}}</view>
		<view class="search-container">
		    运单号：<input class="verification-code-input" placeholder="运单号" v-model="tj1"/>
		    <icon type="search" @click="sousuo"></icon>
		</view>
		<view>
			<view class="table-container">
			  <view class="table-row" v-for="(item, index) in pojo.hr" :key="index">
			    <view class="table-cell">{{ item.ydh }}</view>
			    <view class="table-cell">
			      {{ item.ds }}<template v-if="item.ds !== ''">个</template>
			    </view>
			    <view class="table-cell">
			      {{ item.zl }}<template v-if="item.zl !== ''">kg</template>
			    </view>
			  </view>
			</view>
		</view>
    </view>
	<view class="drawer-button" @click="toggleDrawerd">
		<view class="drawer-header">
			<text>提货信息</text>
			<icon v-if="showRightArrowd" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
		</view>
    </view>
    <view class="drawer-content" :class="{ 'show': showDrawerd }">
		<view>
			<text>请拍照上传回单凭证</text>
		</view>
		<view class="avatar-row">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" v-if="tp.length<3">
				<icon class="iconfont icon-tupian" style="font-size: 50rpx;"></icon>
			</button>
			<image class="avatar" :src="tp[0]" v-if="tp.length>=1"></image>
			<image class="avatar" :src="tp[1]" v-if="tp.length>=2"></image>
			<image class="avatar" :src="tp[2]" v-if="tp.length>=3"></image>
		</view>
		<view>
			<text>请上传货品照片</text>
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatara" v-if="tpa===''" style="margin-bottom: 75rpx;">
				<icon class="iconfont icon-tupian" style="font-size: 50rpx;"></icon>
			</button>
			<view class="avatar-row">
				<image class="avatar" :src="tpa" v-if="tpa!=''"></image>
			</view>
		</view>
    </view>
	<view class="fixed-button-row">
		<button type="primary" style="width: 50%;" @click="yanchi">延迟提货</button>
		<button type="primary" style="width: 50%;" @click="tihuo" :disabled="isButtonDisabled">提货</button>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		pojo:{
			id:'',
			lxr:'',
			cph:'',
			phone:'',
			ds:'',
			hr:[],
			jda:'',
			wda:'',
			jdb:'',
			wdb:'',
			thsj:'',
			sdsj:'',
			startAddress: '',
			endAddress: ''
		},
		showDrawer: false,
		showRightArrow: true,
		showDrawera:false,
		showRightArrowa: true,
		showDrawerb:false,
		showRightArrowb: true,
		showDrawerc:false,
		showRightArrowc: true,
		showDrawerd:false,
		showRightArrowd: true,
		tp:[],
		tpa:'',
		tj1:''
    };
  },
  methods: {
    toggleDrawer() {
      this.showDrawer = !this.showDrawer;
	  this.showRightArrow = !this.showRightArrow;
    },
    toggleDrawera() {
      this.showDrawera = !this.showDrawera;
	  this.showRightArrowa = !this.showRightArrowa;
    },
    toggleDrawerb() {
      this.showDrawerb = !this.showDrawerb;
	  this.showRightArrowb = !this.showRightArrowb;
    },
    toggleDrawerc() {
      this.showDrawerc = !this.showDrawerc;
	  this.showRightArrowc = !this.showRightArrowc;
    },
    toggleDrawerd() {
      this.showDrawerd = !this.showDrawerd;
	  this.showRightArrowd = !this.showRightArrowd;
    },
	sousuo(){
		console.log(this.tj1)
	},
	onChooseAvatar(e) {
		const { avatarUrl }=e.detail
		if(this.tp.length===0){
			this.tp[0]=avatarUrl
		}else if(this.tp.length===1){
			this.tp[1]=avatarUrl
		}else{
			this.tp[2]=avatarUrl
		}
	},
	onChooseAvatara(e) {
		const { avatarUrl }=e.detail
		this.tpa=avatarUrl
	},
	yanchi(){
		wx.navigateTo({
			url:'/pages/index/Daitihuo/Yanchitihuo'
		})
	},
	tihuo(){
		console.log("tihuo")
	}
  },
	onLoad: function(options) {
		const receivedEntity = JSON.parse(decodeURIComponent(options.value));
		this.pojo=receivedEntity
    },
	computed:{
		isButtonDisabled(){
		    return this.tp.length < 3 || this.tpa === '';
		},
	}
};
</script>
<style scoped>
.drawer-button {
  width: 100%;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  user-select: none;
	display: flex; /* 新增 */
	align-items: center; /* 新增 */
	justify-content: space-between; /* 新增 */
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
}

.arrow-down {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent;
}

.drawer-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  
}

.drawer-content.show {
  display: block;
}
.iconfont {
  margin-right: 0%; /* 新增 */
}

.label {
    width: 20%;
    float: left;
    text-align: right;
    padding-right: 1em; /* 添加一些内边距以增加松弛感 */
}

.value {
    margin-left: 10%; /* 确保从左侧30%的位置开始显示内容 */
    clear: both; /* 清除浮动 */
	margin-bottom: 1em;
}
.labela {
    width: 20%;
    float: left;
    text-align: right;
    padding-right: 1em; /* 添加一些内边距以增加松弛感 */
}

.valuea {
    margin-left: 40%; /* 确保从左侧30%的位置开始显示内容 */
    clear: both; /* 清除浮动 */
	margin-bottom: 1em;
}
.icon-changjiantou {
    display: inline-block; /* 确保它作为一个块级元素显示 */
    font-size: 5em; /* 调整图标大小 */
	height: 50rpx;
    transform: scaleX(3); /* 横向拉伸两倍 */
    transform-origin: 0 50%; /* 从左端开始拉伸 */
}
.container {
    display: flex;
}
.search-container {
    display: flex; /* 使子元素在同一行显示 */
    align-items: center; /* 垂直居中对齐 */
}

.verification-code-input {
    border: 1px solid #ccc; /* 添加边框 */
    padding: 5px; /* 内边距 */
	width: 70%;
    margin-right: 5px; /* 右侧外边距，用于与图标分隔 */
}

/* 如果你的 <icon> 元素需要特定样式，例如设置图标大小等，也可以添加 */
.icon[type="search"] {
    /* 可以在这里定义图标的样式，例如字体大小、颜色等 */
}
.table-container {
  display: flex;
  flex-direction: column;
}

.table-row {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #ccc;
}

.table-cell {
  flex: 1;
  padding: 0 10rpx;
  text-align: center;
}
.avatar{
	width: 25%;
	height: 100rpx;
	margin-bottom: 75rpx;
}
.avatar-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20rpx;
}

.fixed-button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  background-color: #fff;
  z-index: 1000; /* 确保按钮层叠在其他内容之上 */
}

/* 按钮样式 */
.fixed-button-row button {
  width: 50%;
  height: 100%;
  line-height: 80rpx;
  text-align: center;
  border: none;
  color: #333;
  font-size: 30rpx;
}
</style>